<template>
    <div class="article_detail" v-if="data">
        <!-- 头部页面固定定位 -->
        <mt-header title="文章详情" fixed>
            <div @click="$router.back()" slot="left">
                <mt-button icon="back"></mt-button>
            </div>
        </mt-header>
        <!-- 文章标题、文章来源 -->
        <div  class="title" v-for="({title,origin},i) in data.data" :key="i">
            <h2>{{title}}</h2>
            <p>文章来源:<span>{{origin}}</span></p> 
        </div>
        <!-- 推荐医师介绍 recommend-->
        <div class="recom" v-if="doctor"> 
            <!-- 头像及姓名职位科室等 -->
            <div class="recom_introduce">
                <img :src="d[i].head" alt="">
                <div class="recom_introduce_name">
                    <p>{{d[i].dname}}</p>
                    <p>{{d[i].lv}}</p>
                </div>
            </div>
            <div class="guahao" @click="goto(d[i].did)">挂号</div>
            <div class="shanchang">
                <p>{{d[i].strong}}</p>
            </div>
            <!-- 换一换 -->
            <div class="change" @click="change()">
                <span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-jiaohuan"></use></svg></span>换一换
            </div>
        </div>
        <!-- 文章主体 -->
        <div class="article" v-for="{aid,detail} in data.data" :key="aid" v-html="detail">
        </div>
    </div>
</template>

<script>
    import '../../assets/js/iconfont'
    export default {
        data() {
            return {
                data: null,
                doctor:null,
                i:this.$route.query.lid
            }
        },
        computed: {
            d(){
                return this.doctor.data
            },
        },
        methods: {
            change(){
                this.i = Math.floor(Math.random()*10+10)
            },
            getData() {
                let url = `details_text?aid=${this.$route.query.lid}`
                this.axios.get(url).then(res=>{
                    this.data = res.data
                })
                this.axios.get('users/doctor').then(res=>{
                    this.doctor = res.data
                })
            },
            goto(value){
                this.$router.push(`doctorDetail?${value}`)
            },
        },
        mounted(){
            window.scrollTo(0,0)
            this.getData()
        },
         watch:{
            i(to){
                this.$router.replace(`/articledetail?lid=${this.i}`)
            },
            $route(){
                this.getData()
            },
        },
    }
</script>

<style lang="scss" scoped>
.article_detail {
    padding: 1vh 3vw;
    &::before{
        content: '';
        display: block;
        height: 40px;
    }
    .mint-header {
    background-color: #fff;
    color: #000;
    font-size: 16px;
    }
    .title {
        h2 {
            margin-top: 0;
            font-weight: 400;
        }
        p {
            float: right;
            font-size: 14px;
        }
    }
    // 推荐医师
    .recom {
        position: relative;
        width: 100%;
        height: 33vh;
        background-color: #f3f4f8;
        border-radius: 3vh;
        margin: 7vh 0;
        .recom_introduce {
            display: flex;
            padding:3vh 2vh;
            img {
                width: 15vw;
                height: 15vw;
                border-radius: 50%;
            }
            .recom_introduce_name {
                padding-left: 3vw;
                font-size: 16px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
           
        }
         .guahao {
            position: absolute;
            top: 2vh;
            right: 3vw;
            font-size: 16px;
            text-align: center;
                color: #fff;
                width: 12vw;height: 5vw;
                padding: 2vw 1vw;
                border-radius: 5vw;
                background-color: #1aa4ff;
            }
        .shanchang {
            height: 70px;
            padding: 2vh;
            padding-bottom: 0;
            border-bottom: 1px solid #dfe0e4;
            overflow: hidden;
            white-space: wrap;
            text-overflow: ellipsis;
        }
        .change {
            color: #1aa4ff;
            text-align: center;
            padding:2vh;
            font-size: 16px;
            span {
                margin-right: 2vw;
                display: inline-block;
                width: 6vw;
                height: 6vw;
                background-color: #1aa4ff;
                color: #fff;
                border-radius: 50%;
            }
            .icon {
                    width: 1.25em;
                    height: 1.25em;
                    vertical-align: -0.15em;
                    fill: currentColor;
                    overflow: hidden;
                }
        }
    }
    //文章主体
    .article {
        width: 100%;
        ::v-deep img {
            width: 95vw;
        }
    }
}
</style>